<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<link rel="icon" href="/img/xfavicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/img/xfavicon.ico" type="image/x-icon">

<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/amazeui.css">
<link rel="stylesheet" type="text/css" href="../css/rotateshake.css">
<link rel="stylesheet" type="text/css" href="../css/nav.css">
<!-- <link rel="stylesheet" type="text/css" href="../css/tip-yellow.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="../css/fakeloader.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"> -->

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootbox.js"></script>
<script type="text/javascript" src="../js/amazeui.js"></script>
<!-- <script type="text/javascript" src="../js/jquery.poshytip.js"></script> -->
<!-- <script type="text/javascript" src="../js/fakeloader.min.js"></script> -->
<script type="text/javascript" src="../js/nav.js"></script>


<style>

</style>
<body style="background-color:#dddddd">
	<div>
    <!-- 顶部操作菜单 -->
    <div class="container navtop">
        <div class="menuoption"><a id="addItemLink" data-am-modal="{target: 'addItemModal'}"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加</a></div>
        <div class="menuoption"><a id="modifyItemLink"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 修改</a></div>
<!--         <div class="menuoption"><a><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 完成</a></div> -->
        <div class="menuoption"><a id="refreshPage" data-am-modal="{target: 'addItemModal'}"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 刷新</a></div>
<!--         <div class="menuoption"><a><span class="glyphicon glyphicon-tag" aria-hidden="true"></span> 标签</a></div> -->
<!--         <div class="menuoption"><a><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> 浏览</a></div> -->
        <div class="menuoption"><a id="lookupCode"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> 代码</a></div>
    </div>
    <!-- <div class="container search">
        <input type="text" name="searchArea">
    </div> -->
    <div class="container mainbox">
    	<div class="searchdiv">
    		<input type="text" class="searchbox" id="searchkw" onkeydown="preDoSearch(event)">
    		<input type="button" onclick="doSearch()" class="searchbtn" value="搜索">
    		<a id="simulateLink"></a>
		</div>
        <div class="line">
        	<c:forEach items="${navItems}" var="item" varStatus="vs">
        		<div class="navitem" id="${item.navid}">
	                <a href="${item.url}" class="navsite" target="_blank" navid="${item.navid}"><img class="siteicon" src="${item.imgSrc}" /><span>${item.siteName}</span></a>
	                <div style="float: right;width: 10px;" onclick="deleteItem(event)">
	                	<img alt="delete" src="../img/delete.png" style="display: none;position: relative;height: 10px;">
	                </div>
	            </div>
        	</c:forEach>
        </div>
    </div>


    <!-- 添加窗口 -->
    <div class="am-modal am-modal-no-btn am-modal-loading" tabindex="-1" id="addItemModal">
        <div class="am-modal-dialog">
            <div class="am-modal-hd"><span id="modalName"></span>
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
                <form class=".form-horizontal" method="post" action="add.action" id="addingItemForm">
                	<input type="hidden" name="navid" id="updateNavId">
                    <div class="form-group">
                        <label class="sr-only" for="siteName">Site Name</label>
                        <input title="站点名称" name="siteName" style="width:35%;" type="text" class="form-control" id="inputSiteName" placeholder="站点名称">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="url">Site URL</label>
                        <input title="站点地址" name="url" type="text" class="form-control" id="inputURL" placeholder="站点地址">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="url">Img Source</label>
                        <input title="图标地址" name="imgSrc" type="text" value="" class="form-control" id="imageSource" placeholder="图标地址">
                    </div>
                    <div class="form-group" id="iconsCollect">
                    </div>
                    <div class="form-group">
<!--                     <button type="button" class="btn btn-default" onclick="clearForm()" >清空</button> -->
                    <button type="button" class="btn btn-primary" onclick="fetchIconUrls(this)">获取图标</button>
                    <button type="button" class="btn btn-success" id="actionBtn" name="">添加</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    </div>
	    
 </body>   
<script type="text/javascript">
	$(document).ready(function(){
//        $(".navtop a[data-am-modal]")
		//添加
        $("#addItemLink").on('click', function(){
        	toggleModal("0");
            $("#addItemModal").modal();
        });
        
        //刷新
        $("#refreshPage").on('click', function(){
        	location.reload();
        });
        
        //修改
        $("#modifyItemLink").on('click', function(){
//        		$(".mainbox > .line > .navitem > a").addClass("modifying");
			toggleModal("1");
        	$(".line div").addClass("shake shake-constant hover-stop shake-rotate");				//添加晃动①
        	$(".line>div").bind('click', modifyItem);												//绑定事件②
        	$(".navitem div img").show();															//显示删除图标③
        	$("#modifyItemLink").popover({content: '单击右键退出修改模式'});							//显示提示信息④
        	$("#modifyItemLink").popover('open');
        	$(document).on("contextmenu",function(e){												//单击右键取消上面的操作
        		e.preventDefault();																	//阻止默认事件
        		$(".line>div").unbind('click', modifyItem);											//取消绑定事件②
        		$(".line div").removeClass("shake shake-constant hover-stop shake-rotate");			//取消晃动①
        		$("#modifyItemLink").popover('close');												//关闭提示④
        		$(".navitem div img").hide();														//隐藏删除图标③
       		});
        });
        
        //源码
       	$("#lookupCode").on('click', function(){
       		window.open('https://git.oschina.net/xuhang/mynav.git','mynav');
       	});
        
//         $('#inputSiteName').poshytip({
//             className: 'tip-yellow',
//             showOn: 'focus',
//             alignTo: 'target',
//             alignX: 'inner-left',
//             offsetX: 0,
//             offsetY: 5,
//             showTimeout: 100
//         });

//         $('#inputURL').poshytip({
//             className: 'tip-yellow',
//             showOn: 'focus',
//             alignTo: 'target',
//             alignX: 'inner-left',
//             offsetX: 0,
//             offsetY: 5,
//             showTimeout: 100
//         });
        
        $("#iconsCollect").on("click", "img", function(){
        	if($(this).hasClass("selectedIcon")){
        		$("#iconsCollect img").removeClass("selectedIcon");
        	}else{
        		$("#iconsCollect img").removeClass("selectedIcon");
        		$(this).addClass("selectedIcon");
        		$("#imageSource").val($(this).attr("src"));
        	}
        });
        
        
        //点击添加或更新按钮
        $("#actionBtn").on('click', function(event){
        	var type = event.target.name;
        	var form = document.forms[0];
        	var navid = form['navid'].value;
        	if(type == '0'){//add
        		form.submit();
        	}else{
        		var siteName = form['siteName'].value;
        		var imgSrc = form['imgSrc'].value;
        		var url = form['url'].value;
        		$.ajax({url: "update.action",type: "POST", data: "navid="+navid+"&siteName="+siteName+"&imgSrc="+imgSrc+"&url="+url, dataType: "json", success: function(data){
        			var div = $("#"+navid);
        			var a = div.find("a");
        			var img = div.find("a").find("img");
        			a.attr("href", data['url']);
        			a.find("span").text(data['siteName']);
//         			$("#siteNameLable").text(siteName);
        			img.attr("src", data['imgSrc']);
        		}});
        	}
        	$("#addItemModal").modal('close');
        });
        
        
        
//         var box = $("#ipbox");
//         box.css("top",window.innerHeight-box.height());
//         box.css("left", (window.innerWidth-box.width())/2);
        
        
        
    });//@ sourceURL=mynav.js
    
     
    
</script>

	<div id="ipbox" style="text-align: center;position: absolute;bottom: 0px">${realip}</div>
</html>